import {Button, DatePicker, Form, Input, Modal, Switch, message, Select} from "antd";
import moment from "moment";
import React from "react";
import {AddTask, UpdateTask} from "../../services/laike/task";
import store from "../../store";

const TaskForm = (props)=>{

    const [form] = Form.useForm();

    React.useEffect(() => {

        let taskData = props.taskData

        form.setFieldsValue({
            Id: taskData.Id,
            Desc: taskData.Desc,
            FuncName: taskData.FuncName,
            CycleTime: taskData.CycleTime,
            Category :taskData.Category,
            LastExecTime: taskData.LastExecTime,
            NextExecTime: taskData.NextExecTime ? moment(taskData.NextExecTime) : null,
            Status: taskData.Status === 1
        })
    })

    const handleFinish = (values) => {

        values.Status = values.Status ? 1 : 0
        values.NextExecTime = moment(values.NextExecTime).format("YYYY-MM-DD HH:mm:ss")

        let cycleTime = Number(values.CycleTime)
        if (isNaN(cycleTime) || cycleTime <= 1) {
            message.warn('执行周期有误')
            return
        }

        let res
        if (values.Id === 0 || values.Id === undefined) {
            res = AddTask(values)
        } else {
            res = UpdateTask(values)
        }

        res.then((resp) => {
            let data = resp.data
            if (data.Code === 200) {
                message.success('保存成功');
                props.cancelFunc(true)
            } else {
                message.error('保存失败');
            }
        }).catch(err => {
            message.error(err);
        })
    }

    // 循环组装Select元素
    const categoryOptions = store.getState().taskCategory.params.map((item,index)=>(
        <Select.Option key={index} value={item}>{item}</Select.Option>
    ))
    return (
        <>
            <Modal
                forceRender

                title="Task"
                visible={props.visible}
                onCancel={props.cancelFunc}
                footer={false}
            >
                <Form form={form} labelCol={{span: 6}} onFinish={handleFinish}>
                    <Form.Item label="Id" name="Id" hidden>
                        <Input/>
                    </Form.Item>
                    <Form.Item label="Desc" name="Desc" rules={[{required: true}]}>
                        <Input/>
                    </Form.Item>
                    <Form.Item label="FuncName" name="FuncName" rules={[
                        {required: true}
                        , {type: "string"}
                        , {whitespace: true, message: "你的函数Map键是空格？"}
                    ]}>
                        <Input/>
                    </Form.Item>
                    <Form.Item label="执行周期(秒)" name="CycleTime" rules={[{required: true}]}>
                        <Input/>
                    </Form.Item>
                    <Form.Item label="类别" name="Category" type="number">
                        <Select  filterOption={false}>
                            {categoryOptions}
                        </Select>
                    </Form.Item>
                    <Form.Item label="上次执行时间" name="LastExecTime">
                        <Input disabled/>
                    </Form.Item>
                    <Form.Item label="下次执行时间" name="NextExecTime" rules={[{required: true}]}>
                        <DatePicker showTime/>
                    </Form.Item>
                    <Form.Item label="是否启用" name="Status" valuePropName="checked">
                        <Switch checked={true}/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{float:"right"}}>
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default TaskForm